<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html";charset="UtF-8">
    </head>
    <script>


       <!--展示所有事项·-->
       function todo_list(){
       fetch('/todos?completed=all')
       .then(function(response){
           return response.json();
       })
       .then(function(myJson){
       console.log(myJson);
        var ul=document.getElementById('ul');
        ul.innerHTML=''
        for (var i=0;i<myJson['todos'].length;i++){
            var li='<li>'+myJson['todos'][i].id+'、  '+'<strong>'+myJson['todos'][i].title+'</strong></li>'
            ul.innerHTML+=li
        }
       })
       .catch(error => console.error('Error:',error))}

       <!--展示已完成事项-->
       function completed(){
       fetch('/todos?completed=1')
       .then(function(response){
           return response.json();
       })
       .then(function(myJson){
       console.log(myJson);
        var ul=document.getElementById('ul');
        ul.innerHTML=''
        for (var i=0;i<myJson['todos'].length;i++){
            var li='<li>    '+myJson['todos'][i].id+'、  '+'<strong>'+myJson['todos'][i].title+'</strong></li>'
            ul.innerHTML+=li
        }
       })
       .catch(error => console.error('Error:',error))}

       <!--展示未完成事项-->
       function unfinish(){
       fetch('/todos')
       .then(function(response){
           return response.json();
       })
       .then(function(myJson){
       console.log(myJson);
        var ul=document.getElementById('ul');
        ul.innerHTML=''
        for (var i=0;i<myJson['todos'].length;i++){
            var li='<li><input type="checkbox" name="'+myJson['todos'][i].id+'"onchange="isFinish(this.name)">'+myJson['todos'][i].id+'、  '+'<strong>'+myJson['todos'][i].title+'</strong></li>'
            ul.innerHTML+=li
        }
       })
       .catch(error => console.error('Error:',error))}


       <!--增加一个事项-->
        function creat(){
        var url='/create'
         var headers={
           "Content-Type":"application/x-www-form-urlencoded"
        }
        var title=document.getElementById('insert').value;
        fetch(url,{
           method:'POST',
           body:"title="+title,
           headers:headers
       })
       .then( function(response){
        console.log('Success:',response)
        location.reload()
       })}

       <!--完成一个事项-->
         function Finish(id){
           var url='/completed'
           var headers={
           "Content-Type":"application/x-www-form-urlencoded"
        }
           fetch('/completed'+'?id='+id,{
               method:'GET',
               headers:headers
           })
           .then(res => res.text)
           .catch(error =>console.error('Error:',error))
           .then(function(response){
               location.reload()
           })
       }
       function isFinish(id){
           if(id){
               Finish(id)

           }
       }

    <!--删除一个事项-->
        function deleted(){
           var headers={
           "Content-Type":"application/x-www-form-urlencoded"
        }
           var id=document.getElementById('del').value
           fetch('/delete'+'?id='+id,{
               method:'GET',
               headers:headers
           })
           .then(res => res.text)
           .catch(error =>console.error('Error:',error))
           .then(function(response){
               location.reload()
           })
       }






    </script>

    <body onload="unfinish()">
    <h1>代办事项清单</h1>
    <input type='text' size='20px' placeholder="添加新事项" id='insert'/>
    <input type='button' value="+" onclick="creat()"/><br>
    <input type='text' size='20px' placeholder="删除事项" id='del'/>
    <input type='button' value=" -" onclick="deleted()"/><br><br>
    <input type='button' value="显示已完成事项" onclick="completed()"/>&nbsp;&nbsp;
    <input type='button' value="显示未完成事项" onclick="unfinish()"/>&nbsp;&nbsp;
    <input type='button' value="显示所有事项    " onclick="todo_list()"/><br>

    <ul id='ul'>

    </ul>

    </body>
</html>